<template>
	<div id="ed_container">
		<div id="ed_left">
			<div class="ed_left_img">
				<!-- <img src="../../assets/equipments/e018.jpg" alt=""> -->
				<!-- 商品图片 -->

				<div class="mainImage">
					<!-- 图片 -->
					<el-image class="imageItem" title="点击大图预览" :src="require('@/assets/equipments/'+imageUrl)"
						fit="contain" />
					<!-- 鼠标层罩 -->
					<div v-show="coverLayerShow" class="coverLayerMouse" :style="coverLayerStyle"></div>
					<!-- 最顶层覆盖了整个原图空间的透明层罩 -->
					<div class="coverLayerMaskTop" @mouseenter="enterHandler" @mousemove="moveHandler"
						@mouseout="outHandler">
					</div>
					<!-- 放大的图片 -->
					<div v-show="coverLayerShow" class="coverLayerRight">
						<el-image :style="coverLayerImg" class="coverLayerRightImg"
							:src="require('@/assets/equipments/'+imageUrl)" fit="contain" />
					</div>
					<!-- 商品图片 -->
				</div>
			</div>
			<div id="ed_left_imgList">
				<el-carousel :interval="4000" :autoplay="false" type="card"
					style="width: 400px;background-color: #DCDCDC;margin-top: 20px;margin-left: 10px;"
					indicator-position="none" arrow="nerver" height="80px">
					<el-carousel-item style="width: 70px;height: 70px;margin-left: 80px;margin-top: 5px;">
						<img class="goodImg" :src="require('@/assets/equipments/'+goodsImgUrl)">
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div id="ed_right">
			<div id="ed_right_name">
				<span>{{this.goodsInfo.name}}</span>
			</div>
			<div id="ed_right_price">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span>现价：￥{{goodsInfo.realprice}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span style="color: #393939;">原价：￥{{goodsInfo.price}}</span>
			</div>
			<div id="ed_right_category">
				<span>种类：{{goodsInfo.category}}</span>
			</div>
			<div id="ed_right_idAndCount">
				<span>商品编号：{{goodsInfo.goodsId}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span>库存数量：{{goodsInfo.goodsCount}}</span>
			</div>
			<div id="ed_right_description">
				<span>描述信息：{{goodsInfo.description}}</span>
			</div>
			<div id="ed_right_buyCount">
				<template>
					购买数量：<el-input-number v-model="num" style="position: ;;" :min="1" :max="10"
						label="描述文字"></el-input-number>
				</template>
			</div>
			<div id="ed_right_button">
				<el-button type="success" style="margin-right: 20px;" @click="addCart(goodsInfo,num)">加入购物车</el-button>
				<el-button type="danger" style="margin-right: 20px;" @click="toMyOrder(goodsInfo,num)">立即购买</el-button>
			</div>

		</div>
	</div>
</template>

<script scoped>
	import request from '../../utils/axios/request';
	export default {
		name: 'GoodsUpload',
		data() {
			return {
				num: 1,
				imageUrl: 'e001.jpg',
				goodsImgUrl: 'e001.jpg',
				Loading: false,
				coverLayerStyle: {
					transform: ""
				},
				coverLayerImg: {},
				coverLayerShow: false,
				addCartinfo: {
					uCId: '',
					eId: '',
					eCount: '',
					eRealprice: '',
					ePrice: ''

				},
				goodsInfo: {
					name: ' ',
					realprice: '',
					price: '',
					category: '',
					goodsId: '',
					goodsCount: '',
					description: '',
					buyCount: ''

				},
				orderItem: {
					eId:'',
					eRealprice: '',
					ePrice: '',
					eCount: '',
					name: '',
					imageUrl: ''
				}

			}
		},
		created() {
			// let clickSearch = this.$cookies.get("clickSearch")
			// let imgSearch = this.$cookies.get("imgSearch")
			// console.log(clickSearch)
			// console.log(imgSearch)
			// console.log(this.$route.query.imgSearch)
			// console.log(this.$route.query.clickSearch)
			this.imgSearch = this.$route.query.imgSearch
			this.clickSearch = this.$route.query.clickSearch
			if (this.clickSearch == null) {
				request({
					method: 'get',
					url: '/equipments/imageUrl/' + this.imgSearch,
				}).then((res) => {
					// console.log(res)
					this.goodsInfo.eId = res.data.data.eId;
					this.goodsInfo.name = res.data.data.eName;
					this.goodsInfo.realprice = res.data.data.eRealprice;
					this.goodsInfo.price = res.data.data.ePrice;
					this.goodsInfo.category = res.data.data.categoryId;
					this.goodsInfo.goodsId = res.data.data.eId;
					this.goodsInfo.goodsCount = res.data.data.eConuts
					this.goodsInfo.description = res.data.data.eDescription;
					this.imageUrl = res.data.data.imageUrl;
					this.goodsImgUrl = res.data.data.imageUrl
				})
			} else if (this.imgSearch == null) {
				request({
					method: 'get',
					url: '/equipments/name/' + this.clickSearch,
				}).then((res) => {
					// console.log(res)
					this.goodsInfo.eId = res.data.data.eId;
					this.goodsInfo.name = res.data.data.eName;
					this.goodsInfo.realprice = res.data.data.eRealprice;
					this.goodsInfo.price = res.data.data.ePrice;
					this.goodsInfo.category = res.data.data.categoryId;
					this.goodsInfo.goodsId = res.data.data.eId;
					this.goodsInfo.goodsCount = res.data.data.eConuts
					this.goodsInfo.description = res.data.data.eDescription;
					this.imageUrl = res.data.data.imageUrl;
					this.goodsImgUrl = res.data.data.imageUrl
				})
			}

		},
		methods: {
			//生成购买订单
			toMyOrder(val, num) {
				// console.log('val')
				// console.log(val)
				// console.log('val')
				this.orderItem.eId = val.eId
				this.orderItem.name = val.name
				this.orderItem.eRealprice = val.realprice
				this.orderItem.ePrice = val.price
				this.orderItem.eCount = num
				this.orderItem.imageUrl = this.imageUrl

				var jsonObj = JSON.stringify(this.orderItem);
				// console.log('adsf')
				// console.log(jsonObj)
				let jsonArray = '[' + jsonObj + ']'
				console.log(jsonArray)
				let jsonArray2 = JSON.parse(jsonArray)
				// let jsonArray = JSON.parse(jsonObj)

				this.$router.push({
					path: 'myOrder',
					query: {
						data: jsonArray2
					}
				})
			},
			//加入商品到购物车
			addCart(goodsInfo, num) {
				// console.log(goodsInfo)
				// console.log(num)
				this.addCartinfo.uCId = '1001'
				this.addCartinfo.eId = goodsInfo.goodsId
				this.addCartinfo.eCount = num
				this.addCartinfo.eRealprice = goodsInfo.realprice
				this.addCartinfo.ePrice = goodsInfo.price
				console.log(this.addCartinfo)
				request({
					method: 'post',
					url: '/userCartDetails/addEquipment',
					data: {
						eId: this.addCartinfo.eId,
						eCount: this.addCartinfo.eCount,
						eRealprice: this.addCartinfo.eRealprice,
						ePrice: this.addCartinfo.ePrice,
						userCartId: this.addCartinfo.uCId,
					}
				}).then((res) => {
					console.log(res)
					if (res.data.code = 100) {
						alert('加入购物车成功')
					}
				})
			},
			// 鼠标进入原图空间函数
			enterHandler() {
				// 层罩及放大空间的显示
				this.coverLayerShow = true;
			},
			// 鼠标移动函数
			moveHandler(event) {
				// 鼠标的坐标位置
				let x = event.offsetX;
				let y = event.offsetY;
				// 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
				let topX = x - 150 < 0 ? 0 : x - 150;
				let topY = y - 150 < 0 ? 0 : y - 150;
				// 对层罩位置再一次限制，保证层罩只能在原图区域空间内
				if (topX > 175) {
					topX = 175;
				}
				if (topY > 175) {
					topY = 175;
				}
				// 通过 transform 进行移动控制
				this.coverLayerStyle.transform = `translate(${topX}px,${topY}px)`;
				this.coverLayerImg.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
			},
			// 鼠标移出函数
			outHandler() {
				// 控制层罩与放大空间的隐藏
				this.coverLayerShow = false;
			},

		}
	}
</script>

<style scoped>
	#ed_right_price {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: red;
		font-size: 24px;
		line-height: 40px;
		background-color: #f4f5f6;
	}

	#ed_right_category {
		margin-top: 20px;
		height: 40px;
		line-height: 40px;
	}

	#ed_right_idAndCount {
		margin-top: 20px;
		height: 40px;
		line-height: 40px;
	}

	#ed_right_description {
		margin-top: 20px;
		height: 60px;
		line-height: 30px;
	}

	#ed_right_name {
		height: 60px;
		line-height: 60px;
		font-size: 32px;
		background-color: #ffffff;
	}

	#ed_right_button {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 50px;
		display: flex;
		flex-direction: row-reverse;
		background-color: #ffffff;
	}

	#ed_right_buyCount {

		height: 40px;
		line-height: 40px;
		background-color: #ffffff;
	}

	.ed_left_img {
		width: 350px;
		height: 350px;
		margin: 20px auto;
		position: relative;
		background-color: #DCDCDC
	}

	.ed_left_img .imageItem {
		border: 1px solid #DCDCDC;
		width: 350px;
		height: 350px;
		position: relative;
	}

	/* 放大的图片，通过定位将左上角定位到(0,0) */
	.coverLayerRightImg {
		display: inline-block;
		width: 800px;
		height: 800px;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* 右边的区域图片放大空间 */
	.coverLayerRight {
		background-color: #FFFFFF;
		width: 350px;
		height: 350px;

		border: 1px solid #DCDCDC;
		position: relative;
		overflow: hidden;
		position: absolute;
		left: 412px;
		top: 0;
		z-index: 1001;
	}

	/* 一个最高层层罩 */
	.coverLayerMaskTop {
		width: 350px;
		height: 350px;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		cursor: move;
	}

	/* 层罩，通过定位将左上角定位到(0,0) */
	.coverLayerMouse {
		width: 200px;
		height: 200px;
		background: rgba(0, 0, 0, 0.3);
		opacity: 0.4;
		position: absolute;
		top: 0;
		left: 0;
	}

	#ed_container {
		width: 1400px;
		height: 560px;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
	}


	#ed_left_img {
		width: 100%;
		height: 70%;
		background-color: #ffffff;
	}

	#ed_left {
		width: 30%;
		box-shadow: 100%;
		margin-left: 10%;
		background-color: #ffffff;
	}

	#ed_right {
		width: 40%;
		height: 100%;
		margin-left: 5%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	/* 
	/deep/ .el-input__inner {
		height: 36px;
		line-height: 36px;
	}

	/deep/ .el-input-number.is-controls-right .el-input-number__increase {
		line-height: 18px;
	}


	/deep/ .el-input-number__increase {
		top: 4px !important;
	}

	/deep/ .el-input-number.is-controls-right .el-input-number__decrease {
		bottom: 4px;
		line-height: 16px;
	} */
</style>